<style lang="less" scoped>
	@import '../.././commom/less/base';

	.index_page {
		font-family: "HYQiHei";
		background-color: #f4f4f4;
		// height: 100vh;
	}

	.banner {
		width: 100%;
		height: 400rpx;
		background: url();
		color: #FFFFFF;

		.text {
			padding-top: 100rpx;

			.t {
				font-size: 50rpx;
				font-weight: bold;
				padding-bottom: 20px;
				display: block;
			}

		}

		.t {
			font-size: 32rpx;
		}

		.t+text {
			font-size: 30rpx;
		}

		text-align: center;
	}

	.list {
		width: 600rpx;
		margin: 0 auto;
		position: relative;
		top: -45rpx;

		&>view {
			margin-bottom: 30rpx;
			width: 600rpx;
			height: 215rpx;
			border-radius: 15rpx;
			background-color: #FFFFFF;
			.flex;
			align-items: center;

			.url {
				.flexbetween
			}
		}

		.icon {
			.w-h(165, 165);
			border-radius: 50%;
			overflow: hidden;
			margin-left: 20rpx;
			margin-right: 20rpx;

			image {
				.w-h(165, 165);
			}
		}
		.r {
			width: 207px;
		}

		.tit {
			font-size: 36rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			display: block;
		}

		.titd {
			font-size: 25rpx;
			line-height: 30rpx;
		}
	}

	.title {
		padding-top: 70rpx;
	}
	.dao {
		display: flex;
		justify-content: center;
		span {
			font-size: 25rpx;
			color: #333;
			 line-height: 40rpx;
			padding-left: 10rpx;
		}
		.img {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.map {
		position: relative;
		width: 100%;
		text-align: center;
		.dao {
			       position: absolute;
			       top: 90rpx;
			       z-index: 9;
			       left: 10rpx;
			       width: 180rpx;
			       height: 50rpx;
			       background: #09BB07;
			       border-radius: 25rpx;
				   line-height:50rpx;
				   text{
					   color: #fff;
					   line-height:50rpx;
					   padding-left: 15rpx;
					   font-size: 22rpx;
				   }
				   text-align: left;
		}
		.as {
			border-top:1px #ddd solid;
			width: 100vw;
			padding: 18rpx 0;
			.i {
				vertical-align: middle;
			}
		}
	}
	.address {
		font-size: 22rpx;
		color: #333;
		padding-left: 12rpx;
	}
	.phone {
		padding-left: 30rpx;position: relative;
    top: 6rpx;
	}
	.phone + text {
		font-size: 22rpx;
		padding-left: 5rpx;
	}
</style>
<template>
	<view class="index_page">
		<view class="banner" :style="{background: 'url('+ban_imageURL+')'}">
			<p class="title">云步e园</p>
			<view class="text">
				<text class="t">智慧园区 科技通行</text><br>
				<text>方便你我，快乐生活</text>
			</view>
		</view>
		
		<view class="list" >
			<view @click="searchCodeHandle">
				<view class="url">
					<view class="icon">
						<image src="../../static/image/qrcode-logo.png"></image>
					</view>
					<view class="r">
						<text class="tit">通行二维码查询</text><br>
						<text class="titd">针对已经预约过的访问单，可以获取通行二维码进行扫码通行。</text>
					</view>
				</view>
			</view>
			
			<view @click="yuyueHandle">
				<view class="url">
					<view class="icon">
						<image src="../../static/image/yuyue-logo.png"></image>
					</view>
					<view class="r">
						<text class="tit">访客预约</text><br>
						<text class="titd">提交预约访问单，预约访问时间及访问事由，由被访者审批。</text>
					</view>

				</view>
			</view>
			
			<view @click="trafiicRecordsHandle">
				<view class="url" url="../trafiicRecords/trafiicRecords">
					<view class="icon">
						<image src="../../static/image/serach-logo.png"></image>
					</view>
					<view class="r">
						<text class="tit">通行记录查询</text><br>
						<text class="titd">提供访问通行记录的查询功能，可查看通行到访时间等信息</text>
					</view>

				</view>
			</view>
		</view>
		<view class="map">
			<view @click="dao" class="dao"><uni-icons type="paperplane-filled" size="15" color="#fff" class="icon"></uni-icons><text>开始导航</text></view>
			<view class="as"><uni-icons class="i" type="map-pin-ellipse" size="20" color="#888"></uni-icons> <text class="address">海淀区宝盛南路一号院奥北科技园4号楼</text>
			<span @click="goPhone()"><uni-icons class="phone" type="phone" size="20" color="#09BB07"></uni-icons> <text> 拨打</text></span></view>
			<map style="width: 100vw;height: 400rpx;border-top:1px #ddd solid;" 
			latitude="40.032637"
			 longitude="116.376956"
			 enable-traffic="true"
			 enable-building="true"
			 show-location="true"
			 title="北京华捷艾米科技有限公司"
			 iconPath="../../static/image/serach-logo.png"
			 width="24"
			 :markers="covers"
			  id="map1"
			  ref="map1"
			   ></map>
		</view>
	</view>
</template>
<script>
import { searchVisitorMsg } from '../../api/visitor.js';
	export default {
		components: {},
		data() {
			return {
				ban_imageURL: 'http://web.faceapi.internal.cloud.hjimi.com/wx/image/banner.jpg',
				ops: null,
				 id:0, // 使用 marker点击事件 需要填写id
				covers: [{
				                latitude: 40.032637,
				                longitude: 116.376956,
				                iconPath: '../../static/image/dao.png',
				            }, {
				                latitude: 40.032636,
				                longitude: 116.376955,
				                iconPath: '../../static/image/dao.png',
								callout: {
									content: '北京华捷艾米科技有限公司',
									color: '#333',
									fontSize:14,
									padding: 10,
									display: 'ALWAYS'
								}
				            }]
			}
		},
		computed: {},
		methods: {
			searchCodeHandle() {
				uni.navigateTo({
					url: '../searchCode/searchCode'
				});
			},
			yuyueHandle() {
				uni.navigateTo({
					url: '../visitingBook/visitingBook'
				});
			},
			trafiicRecordsHandle() {
				uni.navigateTo({
					url: '../trafiicRecords/trafiicRecords'
				});
			},
			dao() {
			// uni.getLocation({
			// 	    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			// 	    success: function (res) {
			// 	        const latitude = res.latitude;
			// 	        const longitude = res.longitude;
			// 	        uni.openLocation({
			// 	            latitude: 40.95933,
			// 	            longitude: 116.29845,
			// 				name: '海淀区奥北科技园4号楼',
			// 				address: '北京华捷艾米科技有限公司',
			// 	            success: function () {
			// 	                // console.log('success');
			// 	            }
			// 	        })
			// 	    }
			// 	});
			uni.getLocation({
			    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			    success: function (res) {
			        const latitude = res.latitude;
			        const longitude = res.longitude;
			        uni.openLocation({
			            latitude: latitude,
			            longitude: longitude,
			            success: function () {
			                console.log('success');
			            }
			        });
			    }
			});
			},
		// takeHanle() {
		// 	uni.getSetting({
		// 	   withSubscriptions: true,   //  这里设置为true,下面才会返回mainSwitch
		// 	   success: function(res){   
			   
		// 	     // 调起授权界面弹窗
		// 	     if (res.subscriptionsSetting.mainSwitch) {  // 用户打开了订阅消息总开关
		// 	       if (res.subscriptionsSetting.itemSettings != null) {   // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
		// 	         let moIdState = res.subscriptionsSetting.itemSettings["5ctXF4051MJpS_Vtq70nuUYjaf_3qD3SWYE17-NTCXQ",""];  // 用户同意的消息模板id
		// 	         if(moIdState === 'accept'){   
		// 	           console.log('接受了消息推送');
			
		// 	         }else if(moIdState === 'reject'){
		// 	           console.log("拒绝消息推送");
			
		// 	         }else if(moIdState === 'ban'){
		// 	           console.log("已被后台封禁");
			
		// 	         }
		// 	       }else {
		// 	         // 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
		// 	         uni.showModal({
		// 	           title: '提示',
		// 	           content:'请授权开通服务通知',
		// 	           showCancel: true,
		// 	           success: function (ress) {
		// 	             if (ress.confirm) {  
		// 	               wx.requestSubscribeMessage({   // 调起消息订阅界面
		// 	                 tmplIds: ["5ctXF4051MJpS_Vtq70nuUYjaf_3qD3SWYE17-NTCXQ"],
		// 	                 success (res) { 
		// 	                   console.log('订阅消息 成功 ');
		// 	                   console.log(res);
		// 						uni.setStorageSync('take', true);
		// 	                 },
		// 	                 fail (er){
		// 	                   console.log("订阅消息 失败 ");
		// 	                   console.log(er);
		// 	                 }
		// 	               })     
			                     
		// 	             }
		// 	           }
		// 	         })
		// 	       }
			
		// 	     }else {
		// 	       console.log('订阅消息未开启')
		// 	     }      
		// 	   },
		// 	   fail: function(error){
		// 	     console.log(error);
		// 	   },
		// 	 })
		// }
		goPhone() {
			uni.makePhoneCall({
			    phoneNumber: '010-62981342', 
			success: (res) => {
			console.log('调用成功!')	
			},
			fail: (res) => {
			uni.showToast({
				title:'调用失败',
				icon: 'none'
			})
			}
			  });
		}
		},
		mounted() {
		// uni.getLocation({
		//     type: 'wgs84',
		//     success: function (res) {
		//         console.log('当前位置的经度：' + res.longitude);
		//         console.log('当前位置的纬度：' + res.latitude);
		//     }
		// });
		
// 判断用户是否授权通知
			// this.takeHanle()
		},
		created() {
			searchVisitorMsg({param: ''})
		}
	}
</script>
